<template>
  <div class="main-box">
    <div >
      <ul class="left" >
        <li v-for="i in imgs" :key="i.id">
          <img v-bind:src="i.img1" style="width: 178px; height: 134px" />
          <h2>{{ i.msg }}</h2>
          <p>
            <img v-bind:src="i.img2" style="width: 20px; height: 20px" />
            {{ i.p }}
            <img v-bind:src="i.img3" style="width: 20px; height: 20px" />1
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "ChuanMain",
  data() {
    return {
      imgs: [
        {
          id: "001",
          img1: "./detail-img/xie.gif",
          img2: "./detail-img/ren.gif",
          img3: "./detail-img/zan.gif",
          msg: "今日分享/Nike Air Force 1'07 suede 黑色  款式简单",
          p: "小怡不开心",
        },
        {
          id: "002",
          img1: "./detail-img/xie.gif",
          img2: "./detail-img/ren.gif",
          img3: "./detail-img/zan.gif",
          msg: "今日分享/Nike Air Force 1'07 suede 黑色  款式简单",
          p: "小怡不开心",
        },
      ],
    };
  },
};
</script>

<style scoped>
@import url(../../../assets/cao-iconfont/iconfont.css);
.main-box {
  background-color: #f4f3f8;
  margin-top: 0.2rem;
}
.left{
    display: flex;
    height: 5rem;
}
.left li{
    width: 1.8rem;
    height: 2.2rem;
    background-color: white;
    margin-left: .07rem;
}
.left h2 {
  width: 1.78rem;
  font-size: 16px;
  flex-wrap: wrap;
}
.left p{
    font-size: .14rem;
}
</style>